<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        /* .container{
            justify-content: space-around;
            display: flex;
            width: 100%;
            /* margin-left:100px; */
        /* } */
        /* .subject{
            justify-content: space-around;
            width: 100%;
            display: flex;
            /* margin-left:100px; */
        /* } */ 
        /* tr:nth-child(2n){
            background-color: rgb(192, 191, 191);
        } */
        table{
            border-collapse: collapse;
            border-top: 2px solid black;
            margin:0 auto
        }
        .active{
          background-color: rgb(192, 191, 191);
        }
    </style>
</head>
<body>
    <div id="app">
        <!-- <div class="container">
            <div v-for="item in titles">
                {{item}}
            </div>
        </div>
        <div class="container2">
            <div v-for="item in list">
                <div class="subject" v-for="(val,key) in item.score">
                    <div>{{item.name}}</div>
                    <div>{{val.math}}</div>
                    <div>{{val.chinese}}</div>
                    <div>{{val.geography}}</div>
                    <div>{{val.history}}</div>
                </div>
            </div>
        </div> -->
        <table cellpadding='34'>
            <thead>
                <tr :class="{active:index%2 !== 0}">
                    <td>
                    </td>
                    <td v-for="item in titles">
                        {{item}}
                    </td>
                </tr>
            </thead>
            <tbody>
                <tr v-for="(item,index) in list" :class="{active:index%2 !== 0}">
                    <td >
                        <img src="./1.png" v-if="index === 0">
                        <img src="./2.png" v-if="index === 1">
                        <img src="./3.png" v-if="index === 2">
                    </td>
                    <td v-for="(val,key) in item.score">
                        {{item.name}}
                    </td>
                    <td v-for="(val,key) in item.score">
                        {{val.math}}
                    </td>
                    <td v-for="(val,key) in item.score">
                        {{val.chinese}}
                    </td>
                    <td v-for="(val,key) in item.score">
                        {{val.english}}
                    </td>
                    <td v-for="(val,key) in item.score">
                        {{val.geography}}
                    </td>
                    <td v-for="(val,key) in item.score">
                        {{val.history}}
                    </td>
                </tr>
            </tbody>
        </table>
    </div>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script>
        let vm = new Vue({
        el: "#app",
        data() {
          return {
            titles:['姓名','数学','语文','英语','地理','历史','总分'],
            list: [
              {
                name: "肖枫",
                score: [
                  {
                    math: 99,
                    chinese: 100,
                    english: 100,
                    geography: 99,
                    history: 98,
                  },
                ],
              },

              {
                name: "安澜",
                score: [
                  {
                    math: 90,
                    chinese: 98,
                    english: 89,
                    geography: 96,
                    history: 100,
                  },
                ],
              },

              {
                name: "路小北",
                score: [
                  {
                    math: 88,
                    chinese: 87,
                    english: 77,
                    geography: 86,
                    history: 78,
                  },
                ],
              },

              {
                name: "许巍",
                score: [
                  {
                    math: 39,
                    chinese: 40,
                    english: 76,
                    geography: 90,
                    history: 59,
                  },
                ],
              },
            ],
          };
        },
      });
    </script>
</body>
</html>